<template>
  <div id="app">
    <mt-header :title="pageTitle" :fixed="true" v-show="headShow">
      <router-link to="/" slot="left" v-show="backShow">
        <mt-button icon="back"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <!-- 路由组件出口 -->
    <router-view></router-view>
    <!-- 底部bar -->
    <mt-tabbar v-model="selected" :fixed="true" v-show="footerShow">
      <mt-tab-item id="home">
        <img slot="icon" src="./assets/img/tabbar_1@avtive.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="find">
        <img slot="icon" src="./assets/img/tabbar_2@avtive.png">
        发现
      </mt-tab-item>
      <mt-tab-item id="my">
        <img slot="icon" src="./assets/img/tabbar_3@avtive.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import { Header, Tabbar, TabItem, Button } from 'mint-ui';
import {mapGetters} from 'vuex'
export default {
  name: 'app',
  data() {
    return {
      selected:'',
    }

  },
  computed:mapGetters([
      'headShow',
      'backShow',
      'footerShow',
      'pageTitle'
  ]),
  watch: {
    selected:function(newV){
      console.log(newV)
      this.$router.push({name:this.selected})
    }
  },
  mounted() {
      
  },
  methods: {
    //测试axios
    test(){
      this.$axios('http://fxtest.sltonline.cn/silk-wechat/wechat/newPackageDetail/list')
      .then((res) => {
        console.log(res)
      }).catch(error=>{
        console.log(error)
      })
    }
  },
  components: {
    "mt-header":Header,
    "mt-button":Button,
    "mt-tabbar":Tabbar,
    "mt-tab-item":TabItem
  }
}

</script>

<style lang="scss">
*{
  padding:0px;
  margin:0px;
}
#app {
  // font-family: 'Avenir', Helvetica, Arial, sans-serif;
  font-family: "Noto Sans SC";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
